import React, {FC, useCallback, useMemo, useRef, useState} from "react";
import {Spin} from "antd";
import "./css/LibraryPage.less";
import {Panel, PanelGroup} from "react-resizable-panels";
import CTable from "../../global/table/CTable";
import DetailsContent from "../../main/content/DetailsContent.tsx";
import {treeEach} from "../../utils";

const needFindParent = ["NewOpDep","VehicleEBOM"];

interface LibraryPageProps {
    rowKey: string,
    viewName: string,
    isLazyData: boolean,
    isTreeTable: boolean,
    tableApi: any
}

const LibraryPage: FC<LibraryPageProps> = (props) => {
    const cTable = useRef();
    const dataMapRef = useRef({})

    const [loading, setLoading] = useState(false),
        [selectRow, setSelectRow] = useState(null);

    const getLeftWidth = useCallback((num) => {
        return num / window.innerWidth * 100;
    }, []);

    const findProjectNode = useCallback((node) => {
        let typeName = node.parentObj.typeName;
        let obj = node;
        while (typeName != "XOT_LIBTOP") {
            obj = obj.parentObj;
            typeName = obj.parentObj.typeName;
        }
        return obj;
    }, [])

    const handleSelect = useCallback((selectRows) => {
        if (selectRows.length) {
            let node = selectRows[0];
            if (needFindParent.indexOf(node.storageContent) !== -1 && node.parentObj) {
                node.parentName = node.parentObj.name;
                const projectObj = findProjectNode(node)
                node.projectName = projectObj ? projectObj.name : "";
            }
            setSelectRow(node)
        }
    }, [])

    const renderLibraryPageTree = useMemo(() => {
        const {rowKey = "id", isLazyData, isTreeTable, tableApi = {}, viewName} = props;
        const size = getLeftWidth(250);
        const tableHeight = document.querySelector('.sf_core_main_layout_content_main_content').offsetHeight;
        return (
            <Panel defaultSize={size} minSize={size} className="sf_core_library_page_tree">
                <CTable
                    init={cTable}
                    rowKey={rowKey}
                    isLazyData={isLazyData}
                    isTreeTable={isTreeTable}
                    tableApi={tableApi}
                    view={viewName}
                    height={tableHeight}
                    hasCheckbox={false}
                    isSideBar={false}
                    headerHeight={0}
                    onSelectChange={handleSelect}
                    dataSourceFilter={(data: any) => {
                        treeEach(data,(i)=>{
                            if (dataMapRef.current[i.parentId]) {
                                i.parentObj = dataMapRef.current[i.parentId] || null
                            }
                            dataMapRef.current[i[rowKey]] = i
                        })
                        return data
                    }}
                    isRowSelectable={({data}) => {
                        return !!data.storageContent && data.storageContent !== "FILE"
                    }}
                />
            </Panel>
        )
    }, [props]);

    const renderLibraryPageTable = useMemo(() => {
        if (!selectRow) {
            return null
        }
        const prop = {
            key: selectRow.id,
            objectId: selectRow.id,
            objectTypeId: selectRow.storageContent,
            objectStatusId: 0,
            ds: {
                row: selectRow
            },
            splitPage: {}
        }
        return (
            <DetailsContent {...prop}/>
        )
    }, [selectRow]);

    const renderLibraryPage = useMemo(() => {
        return (
            <Spin spinning={loading} wrapperClassName="sf_core_library_page">
                <PanelGroup direction="horizontal">
                    {renderLibraryPageTree}
                    <Panel className="sf_core_library_page_table">
                        {renderLibraryPageTable}
                    </Panel>
                </PanelGroup>
            </Spin>
        )
    }, [loading, props, selectRow]);

    return (renderLibraryPage);
};

export default React.memo(LibraryPage);